<template>
  <el-dialog
    class="gl_dialog_TitleLine"
    width="520px"
    title="修改密码"
    :visible.sync="updatePasswordDialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
  >
    <el-form
      ref="changePasswordInputVO"
      :model="changePasswordInputVO"
      :rules="changePasswordInputVO_Rules"
      label-width="80px"
      size="mini"
      @submit.native.prevent
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="密码" prop="currentPassword">
            <el-input v-model.trim="changePasswordInputVO.currentPassword" type="password" show-password placeholder="请输入密码" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model.trim="changePasswordInputVO.newPassword" type="password" show-password placeholder="请输入新密码" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input v-model.trim="changePasswordInputVO.confirmPassword" type="password" show-password placeholder="请再次输入新密码" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button size="mini" @click="updatePasswordDialog = false">取 消</el-button>
      <el-button size="mini" :loading="dialogLoading" type="primary" @click="updatePassword">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import validator from '@/lib/validate/index';
import { translateByCode } from '@/lib/getTransData.js';
import { api_PUT_UsersChangePassword } from '@/extend/api/swaggerApi/identity';
export default {
  data() {
    const _this = this;
    return {
      updatePasswordDialog: false,
      changePasswordInputVO: {
        currentPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      changePasswordInputVO_Rules: {
        currentPassword: [
          validator.required('请输入密码')
        ],
        newPassword: [
          validator.required('请输入新密码'),
          {
            validator (rule, value, callback) {
              callback(validator.checkPwd(value, translateByCode('rules.validPassword')));
            },
            trigger: 'blur'
          }
        ],
        confirmPassword: [
          validator.required('请输入新密码'),
          {
            validator: (rule, value, callback) => {
              // 判断
              if (_this.changePasswordInputVO.newPassword &&
                  _this.changePasswordInputVO.confirmPassword &&
                  _this.changePasswordInputVO.newPassword !== _this.changePasswordInputVO.confirmPassword
              ) {
                callback(new Error('两次输入密码不一致'));
              }
              callback();
            },
            trigger: 'onBlur'
          }
        ]
      },
      dialogLoading: false
    };
  },
  methods: {
    open() {
      this.changePasswordInputVO = {
        currentPassword: '',
        newPassword: '',
        confirmPassword: ''
      };
      this.dialogLoading = false;
      this.updatePasswordDialog = true;
      this.$nextTick(() => {
        this.$refs.changePasswordInputVO && this.$refs.changePasswordInputVO.clearValidate();
      });
    },
    close() {
      this.updatePasswordDialog = false;
    },
    updatePassword() {
      this.$refs.changePasswordInputVO.validate(valid => {
        if (!valid) return;
        this.dialogLoading = true;
        api_PUT_UsersChangePassword(this.changePasswordInputVO).then(() => {
          this.$message({ type: 'success', message: '密码修改成功' });
          this.dialogLoading = false;
          this.updatePasswordDialog = false;
        }, error => {
          this.dialogLoading = false;
          this.$message({ type: 'error', message: (error.error && error.error.message || '操作失败') });
        });
      });
    }
  }
};
</script>
